<template>
  <div>
    <header class="app-header">在线考试</header>
    <div class="aa">
      <div class="test">
        <div class="test-title">
          <span class="test-num">{{index+1}}---</span>{{item&&item.title}}
          <button @click="tips" class="tips">提示</button>
        </div>
        <div class="test-answer" v-for="(v,i) in options" :key='i'>
          <label for="">
            <input :type="types" :name="names">{{v.index}} : {{v.value}}
          </label>
        </div>
        <div class="btn">
          <button class="up" @click="up">上一题</button>
          <button class="down" @click="down" ref="nextss">下一题</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  data () {
    return {
      types: 'checkbox',
      names: ''
    }
  },
  computed: {
    ...mapState('msbd', ['questions', 'index', 'examTotal']),
    item () {
      return this.questions[0] && this.questions[this.index]
    },
    options () {
      return this.item ? JSON.parse(this.item.options) : []
    }
  },
  methods: {
    down () {
      if (this.index < this.examTotal - 1) {
        this.questions[this.index + 1]
        this.setIndex(this.index + 1)
      }
      if (this.index == this.examTotal - 1) {
        this.$refs.nextss.innerHTML = '提交'
      }
      // console.log(this.index+1)
      // this.getQuestion()
      // console.log(this.item.answers || [])
      if (JSON.parse(this.item.answers).length > 1) {
        this.types = 'checkbox'
        this.names = ''
      } else {
        this.types = "radio"
        this.names = 'a'
      }
    },
    up () {
      if (!this.index < 1) {
        this.questions[this.index - 1]
        this.setIndex(this.index - 1)
      }
      if (this.index < this.examTotal - 1) {
        this.$refs.nextss.innerHTML = '下一题'
      }
      if (JSON.parse(this.item.answers).length > 1) {
        this.types = 'checkbox'
        this.names = ''
      } else {
        this.types = "radio"
        this.names = 'a'
      }
      // this.getQuestion()
    },
    ...mapActions('msbd', ['getQuestion']),
    ...mapMutations('msbd', ['setIndex']),
    tips () {
      this.$toast(this.item.tips, 1500)
    }
  },
  created () {


  },
  async mounted () {
    this.questions[0]
    this.setIndex(0)
    // console.log(this.index)
    console.log(this.item)
    // this.index==0
    // if(JSON.parse(this.item.answers).length>1){
    //   this.types='checkbox'
    // }else{
    //   this.types="radio"
    // }
    // console.log(JSON.parse(this.item.answers).length)
    // console.log(this.$refs.nextss.innerHTML)
    // let r = this.questions.map(i => i)
    // console.log(r)
    // console.log(this.questions)
    await this.getQuestion()
  }
}
</script>

<style scoped>
.aa {
  height: calc(100vh - 120px);
  overflow: hidden;
  overflow-y: auto;
}

.test {
  padding: 10px;
}

.test-title {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0px;
}

.test-num {
  font-style: italic;
  color: #999;
}

.test-answer div {
  padding: 5px 0;
}

.test-answer {
  padding: 10px 0;
}

.tips {
  background-color: #ccc;
  border: none;
  outline: none;
  color: #999;
  border-radius: 5px;
}

.btn {
  padding: 10px 0;
}

.up {
}

.down {
}
</style>